<!-- <template>
  <div class="block">
    <el-timeline>
      <el-timeline-item v-for="(item, index) of timeline" :key="index" :timestamp="item.timestamp" placement="top">
        <el-card>
          <h4>{{ item.title }}</h4>
          <p>{{ item.content }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  data () {
    return {
      timeline: [
        {
          timestamp: '2019/4/20',
          title: 'Update Github template',
          content: 'PanJiaChen committed 2019/4/20 20:46'
        },
        {
          timestamp: '2019/4/21',
          title: 'Update Github template',
          content: 'PanJiaChen committed 2019/4/21 20:46'
        },
        {
          timestamp: '2019/4/22',
          title: 'Build Template',
          content: 'PanJiaChen committed 2019/4/22 20:46'
        },
        {
          timestamp: '2019/4/23',
          title: 'Release New Version',
          content: 'PanJiaChen committed 2019/4/23 20:46'
        }
      ]
    }
  }
}
</script> -->
 

 

<!-- <template> -->
  <!-- <div id="app">
    <nav>{{ update_time }} {{ week }}</nav> -->
  <!-- <div class="hello">
    <div class="d-flex justify-content-center mt-4">
      <input type="text" class="form-control col-5" placeholder="输入城市名称然后回车..." v-model="city" @keyup.enter="search">
      <button class="btn btn-primary mb-4 col-1" @click="search"> 搜索</button>
      <br>

    </div> -->



  <!-- 城市信息
      <h2>{{ city }}</h2>
      <h4>{{ message }}</h4>
      <h2>{{ wea }}</h2>
      <h1>{{ tem }}℃</h1>
      <div class="detail">
        <span>风力{{ win_speed }}&nbsp;|&nbsp;{{ win }}&nbsp;|&nbsp;空气质量：{{ air_level }}</span>
      </div>
      天气列表
      <ul class="list">
        <li v-for="item in obj">
          <div>
            <h3>{{ item.data }}</h3>
            <h3>{{ item.week }}</h3>
            <img :src="get(item.wea_img)" alt="" />
            <h3>{{ item.wea }}</h3>
            <h3>{{ item.tem1 }}℃-{{ item.tem2 }}℃</h3>
          </div>
        </li>
      </ul>
    </div>
  </div> -->
<!-- </template> -->
 
<!-- <script >
import axios from "axios"; //引入axios 
export default {
  name: "HelloWorld",
  data () {
    return {
      city: "",
      obj: [],
      date: "",
      week: "",
      wea: "",
      message: "",
    };
  },
  methods: {
    get (sky) {
      //图片格式
      return "https://xintai.xianguomall.com/skin/pitaya/" + sky + ".png";
    },
  },
  created () {
    this.get();
    var that = this;
    axios
      .get(
        "https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=69379374&appsecret=kzBk2afS&city=北京"
      )//这里的id和appsecret用12345678和abcdefgh代替，替换成自己的即可
      .then(function (response) {
        //处理数据
        that.city = response.data.city;//城市
        that.obj = response.data.data;
        that.update_time = response.data.update_time;//时间
        that.week = response.data.data[0].week;
        that.wea = response.data.data[0].wea;//天气状况
        that.tem = response.data.data[0].tem;//温度
        that.win_speed = response.data.data[0].win_speed;//风力
        that.win = response.data.data[0].win;//风向
        that.air_level = response.data.data[0].air_level;//空气质量
        that.message = response.data.data[0].air_tips;
      })
      .catch(function (error) {
        console.log("请求失败");
      });
  },
}
</script>
  -->
<!-- <style scoped> h2 {
   font-size: 20px;
 }

 h2,
 h4 {
   text-align: center;
 }

 nav {
   display: flex;
   padding: 10px;
 }

 .list {
   padding-top: 20px;
   max-width: 1480px;
   margin: 0 auto;
 }

 li {
   float: left;
   list-style-type: none;
   width: 200px;
   text-align: center;
   margin-top: 20px;
 }
</style> -->
<template>
  <div class="register-container">
    <div class="register-content">
      <el-form>
        <el-form-item label="城市">
          <!-- <el-input v-model.trim="user.introduction" /> -->
          <el-col :span="10">
            <el-input v-model="city" placeholder="城市" />
          </el-col>
          <el-col :span="5">
            <el-button type="primary" @click="submit">搜索</el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <div id="app">
      <nav>{{ update_time }} {{ week }}</nav>

      <div class="hello">
        <!-- 城市信息 -->
        <h2>{{ city }}</h2>
        <h4>{{ message }}</h4>
        <h2>{{ wea }}</h2>
        <h1>{{ tem }}℃</h1>
        <div class="detail">
          <span>风力{{ win_speed }}&nbsp;|&nbsp;{{ win }}&nbsp;|&nbsp;空气质量：{{ air_level }}</span>
        </div>
        <!-- 天气列表 -->
        <ul class="list">
          <li v-for="item in obj">
            <div>
              <h3>{{ item.data }}</h3>
              <h3>{{ item.week }}</h3>
              <img :src="get(item.wea_img)" alt="" />
              <h3>{{ item.wea }}</h3>
              <h3>{{ item.tem1 }}℃-{{ item.tem2 }}℃</h3>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script >
import axios from "axios"; //引入axios 
export default {
  name: "HelloWorld",
  data () {
    return {
      city: "",
      obj: [],
      date: "",
      week: "",
      wea: "",
      message: "",
    };
  },
  methods: {
    get (sky) {
      //图片格式
      return "https://xintai.xianguomall.com/skin/pitaya/" + sky + ".png";
    },
    submit () {
      this.get();
      var that = this;
      axios
        .get(
          "https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=69379374&appsecret=kzBk2afS&city=" + that.city
        )//这里的id和appsecret用12345678和abcdefgh代替，替换成自己的即可
        .then(function (response) {
          //处理数据
          //that.city = response.data.city;//城市
          that.obj = response.data.data;
          that.update_time = response.data.update_time;//时间
          that.week = response.data.data[0].week;
          that.wea = response.data.data[0].wea;//天气状况
          that.tem = response.data.data[0].tem;//温度
          that.win_speed = response.data.data[0].win_speed;//风力
          that.win = response.data.data[0].win;//风向
          that.air_level = response.data.data[0].air_level;//空气质量
          that.message = response.data.data[0].air_tips;
        })
        .catch(function (error) {
          console.log("请求失败");
        });
    },
  },
  // created () {

}
</script>
 
<style scoped> h2 {
   font-size: 20px;
 }

 h2,
 h4 {
   text-align: center;
 }

 nav {
   display: flex;
   padding: 10px;
 }

 .list {
   padding-top: 20px;
   max-width: 1480px;
   margin: 0 auto;
 }

 li {
   float: left;
   list-style-type: none;
   width: 200px;
   text-align: center;
   margin-top: 20px;
 }
</style>